<template>
	<view>
		<view class="myTopBox" style="width: 100%;height: 300rpx;display: flex;flex-direction: row;border-bottom-left-radius: 50rpx;border-bottom-right-radius: 50rpx;">
			<view class=""
				style="width: 30%;height: 100%;display: flex;flex-direction:row;justify-content: center;align-items: center;">
				<view class=""
					style="width: 180rpx;height: 180rpx;border-radius: 50%;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="FILE_SRC_PATH + userInfo.logoPath" mode="">
					</image>
				</view>
			</view>
			<view class="" style="width:70%; height: 100%; color: #ffffff;">
				<view class="" style="font-weight: bold;font-size: 40rpx;margin-top: 30rpx;">{{userInfo.shopName}}</view>
				<view class="" style="margin-top: 1%;">营业时间：{{optionTime[0].beginTime}} - {{optionTime[0].endTime}} <text
						v-if="optionTime.length>1">...</text></view>

				<view  class="" style="margin-top: 1%;display: flex;flex-direction: row;align-items: center;" >
					营业状态：<view class="stateYE" :style="{color:userInfo.openStatus == 0 ? '#6CE26C' : 'red'}"> <view class="state" :style="{background:userInfo.openStatus == 0 ? '#6CE26C' : 'red'}"> </view> {{userInfo.openStatus == 0 ? '营业中' : '休息中'}}</view>
						
				</view>
				<view  class="gonggao" style="margin-top: 1%;">
					店铺公告：{{userInfo.notice}}</view>
			</view>
			<view class="" style="width: 50rpx;height: 50rpx;position: relative;right: 40rpx;top: 30rpx;">
				<image @click="shezhi" style="width: 100%;height: 100%;" src="../../static/img/shezhi.png" mode=""></image>
			</view>
		</view>
		<view class="" style="width: 100%;padding: 20rpx 20rpx;">
			<view class="" style="width: 100%;padding: 0 20rpx;border-radius: 20rpx;background-color: #ffffff;">
				<view class="" @click="intowallet"
					style="width: 100%;height: 100rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>店铺钱包</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="" style="margin-right: 10rpx;color: red;font-size: 30rpx;">￥{{WalletInfo.money}}
						</view>
						<view class="" style="width:35rpx; height: 35rpx;">
							<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="" @click="intoBill"
					style="width: 100%;height: 100rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>账单</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="" style="width:35rpx; height: 35rpx;">
							<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="" @click="intoWaiter"
					style="width: 100%;height: 100rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>人员管理</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="" style="width:35rpx; height: 35rpx;">
							<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
							</image>
						</view>
					</view>
				</view>
				<!-- <view class=""
					style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>性别</view>
					<view>{{userInfo.sex}}</view>
				</view> -->
				<view class="" @click="open"
					style="width: 100%;height: 100rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>店铺电话</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="" style="margin-right: 10rpx;">{{userInfo.mobiles}}</view>
						<view class="" style="width:35rpx; height: 35rpx;">
							<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
							</image>
						</view>
					</view>
				</view>

			</view>
			<view class=""
				style="width: 100%;padding: 0 20rpx;border-radius: 20rpx;background-color: #ffffff;margin-top: 40rpx;">
				<!-- <view class="" @click="openKefu"
					style="width: 100%;height: 120rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>客服中心</view>
					<view class="" style="width:40rpx; height: 40rpx;">
						<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
						</image>
					</view>

		
				</view> -->
				<!-- <view class="" @click="intoXiuGai"
					style="width: 100%;height: 120rpx;border-bottom: 1px solid #ECECEC;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view>修改密码</view>
					<view class="" style="width:35rpx; height: 35rpx;">
						<image src="../../static/img/myPage/right.png" style="width: 100%;height: 100%;" mode="">
						</image>
					</view>

				</view> -->
			</view>
		</view>
		<u-modal v-model="show" title="修改手机号" show-cancel-button @confirm="confirm" @cancel="cancel">
			<view class="" style="height: 50rpx;width: 100%;"></view>
			<u-field v-model="mobile" label="手机号" placeholder="请填写手机号">
			</u-field>
			<view class="" style="height: 50rpx;width: 100%;"></view>
		</u-modal>
		
		<u-modal v-model="show1" :content="content" title="提示" show-cancel-button @confirm="confirm1" @cancel="cancel">

		</u-modal>
		<u-modal v-model="show2" :content="content2" title="客服电话" confirm-text="去联系" show-cancel-button
			@confirm="confirm2" @cancel="cancel">

		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				FILE_SRC_PATH: this.sysConstant.FILE_SRC_PATH,
				show: false,
				show1: false,
				show2: false,
				mobile: '',
				content: "确认要退出账号？",
				content2: "",
				optionTime: [],
				WalletInfo: {}
			}
		},
		onShow() {
			this.getPageInfo()
			// this.getKefu()
		},
		onLoad() {
			this.getPageInfo()
			// this.getKefu()
		},
		onShow(){
			this.getPageInfo()
		},
		methods: {
			shezhi(){
				uni.navigateTo({
					url:'/pages/common/setting/setting'
				})
			},
			intoHeadImg() {
				uni.navigateTo({
					url: '/pages/mySonPage/myHeadImg?headImg = ' + this.userInfo.avator
				})
			},
			getPageInfo() {
				this.getInfo()
				this.getTime()
				this.getWalletInfo()
			},
			intoWaiter() {
				uni.navigateTo({
					url: '/pages/orderSonPage/allocationOrder/allocationOrder'
				})
			},
			//获取店铺基本信息
			getInfo() {
				this.$u.get('/authorize/life/shop/info', {}).then(res => {
					console.log(res)
					if (res.success) {
						this.userInfo = res.data
						console.log(this.userInfo);
						this.mobile = this.userInfo.mobiles
					} else {
						// this.$refs.uToast.show({
						// 	title: res.msg,
						// 	type: 'error',
						// })
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			//获取店铺营业时间
			getTime() {
				this.$u.get('life/shop/time/page', {}).then(res => {
					console.log("我是营业时间");
					console.log(res)
					this.optionTime = res.list
					console.log('6666699999988888');
					console.log(this.optionTime);

				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			//获取店铺钱包
			getWalletInfo() {
				this.$u.get('life/shop/wallet/getWalletInfo', {}).then(res => {
					console.log("我是获取店铺钱包");
					console.log(res)
					this.WalletInfo = res.data

				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			//进入账单
			intoBill(){
				uni.navigateTo({
					url:'/pages/tabBar/billPage'
				})
			},
			//进入钱包流水
			intowallet(){
				uni.navigateTo({
					url:'/pages/common/walletStream/walletStream'
				})
			},

			// getKefu() {
			// 	this.$u.get('/api/customer/phone', {}).then(res => {
			// 		console.log(res)
			// 		if (res.code == 200) {
			// 			this.content2 = res.data
			// 		} else {
			// 			this.$refs.uToast.show({
			// 				title: res.msg,
			// 				type: 'error',
			// 			})
			// 		}
			// 	}).catch(() => {
			// 		this.$refs.uToast.show({
			// 			title: "请求失败",
			// 			type: 'error',
			// 		})
			// 	})
			// },
			open() {
				this.show = true;
			},
			cancel() {
				this.$refs.uToast.show({
					title: "已取消",
					type: 'warning',
				})
			},
			confirm() {
				console.log("你点击了确定按钮");
				this.$u.put('/life/shop/update', {
					mobiles: this.mobile
				}).then(res => {
					console.log(res)
					if (res.success) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
						})
						this.getPageInfo()
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			tuichu() {
				// console.log(uni.getStorageSync('phone'));
				// console.log(uni.getStorageSync('password'));
				uni.setStorageSync('phone', '')
				uni.setStorageSync('password', '')
				this.show1 = true;
			},
			confirm1() {
				getApp().globalData.token = ''
				uni.redirectTo({
					url: '/pages/common/login'
				})
			},
			confirm2() {
				uni.makePhoneCall({
					phoneNumber: this.content2, // 电话号码
					success: (res) => {
						console.log(res);
					}, // 成功
					fail: (err) => {
						console.log(err);
					} // 失败
				});

			},
			intoXiuGai() {
				uni.navigateTo({
					url: '/pages/mySonPage/modifyPassWord'
				})
			},
			openKefu() {
				this.show2 = true
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F9FA;
	}
	.state{
		width: 30rpx;height: 30rpx;border-radius: 50%;
		margin-right: 10rpx;
	}
	.myTopBox{
		background-image: -moz-linear-gradient(45deg, rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: -webkit-linear-gradient(45deg,rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: linear-gradient(45deg,rgb(153, 133, 255),rgb(29, 218, 255));
	}
	.stateYE{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.gonggao{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里的数字表示显示的行数，可以根据需要调整 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>